<template>
    <div>
        <el-col :span="24" >
            <el-form :inline="true">
                <el-form-item label="标题">
                    <el-input style="width: 200px;" v-model="formData.problemTitle"  clearable />
                </el-form-item>

                <el-form-item label="标题分类" :label-width="formLabelWidth" :data="updateType">
                    <el-select v-model="formData.problemCategory" placeholder="请选择分类" style="width: 200px;">        
                        <el-option :label="v.name" :value="v.name" v-for="(v,i) in updateType" :key="i"/>
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" @click="complete(2)">删除</el-button>
                </el-form-item>
            </el-form>            
        </el-col>

        <el-col :span="24">
                <el-table :data="tableData" style="width: 100%" stripe border class="my-table" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="40" />
                    <el-table-column prop="id" label="id"  />
                    <el-table-column prop="problemTitle" label="问题名称" />
                    <el-table-column prop="problemContent" label="问题内容"  />
                    <el-table-column prop="problemReleaseTime" label="提问时间"  />
                    <el-table-column prop="problemCategory" label="问题类别"  />
                    <el-table-column prop="problemUserId" label="提问人id" />
                    <el-table-column prop="problemUserName" label="提问人" />
                    <el-table-column prop="del" label="状态" />
                    <el-table-column prop="operate" label="操作">
                        <template v-slot="scope">
                            <el-button type="primary" link @click="problemsOperate(scope,1)" >编辑</el-button>
                            <el-button type="primary" link @click="problemsOperate(scope,2)" >删除</el-button>
                            <el-button type="primary" link @click="problemsOperate(scope,3)" >查看回复</el-button>
                        </template>
                    </el-table-column>
                </el-table>    
        </el-col>
        <el-row>
    <el-pagination
        :page-sizes="[5, 10, 30, 40]"
        :size="size"
        :disabled="disabled"
        :background="background"
        :default-page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="pageNumChange"
    />
        </el-row>
         
                <!-- 这个是查看回复 用的弹窗 -->
                <el-dialog v-model="replyVisible" title="回复" width="800" stripe border class="my-table">
                    <el-table :data="selectByIdData">
                    <el-table-column property="id" label="id" width="40" />
                   
                    <el-table-column property="problemTitle" label="题目" width="100" />
                   
                    <el-table-column property="replyPersonName" label="回复人"  width="100"/>
        
                    <el-table-column property="repliedPersonName" label="被回复人"  width="100"/>
                    <el-table-column property="replyContent" label="回复内容" width="200" />
                    <el-table-column property="replyTime" label="回复时间" width="120"/>
                    <el-table-column property="del" label="del" width="50"/>
                    </el-table>
                </el-dialog>

                <!-- 这个是修改用的弹窗 -->
                <el-dialog v-model="dialogVisible" title="修改信息" width="500">
                    <el-form :model="problems">
                        <el-form-item label="用户id" :label-width="formLabelWidth">
                            <el-input v-model="problems.id" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="题目" :label-width="formLabelWidth">
                            <el-input v-model="problems.problemTitle" autocomplete="off"/>
                        </el-form-item>        
                        <el-form-item label="内容" :label-width="formLabelWidth">
                            <el-input v-model="problems.problemContent" autocomplete="off"/>
                        </el-form-item>   
                        <el-form-item label="创建时间" :label-width="formLabelWidth">
                            <el-input v-model="problems.problemReleaseTime" autocomplete="off"/>
                        </el-form-item>

                        <el-form-item label="题目分类" :label-width="formLabelWidth" :data="updateType">
                                 <el-select v-model="updateCategories" placeholder="请选择分类">        
                                      <el-option :label="v.name" :value="v.name" v-for="(v,i) in updateType" :key="i"/>
                                </el-select>
                        </el-form-item> 
     
                        <el-form-item label="用户id" :label-width="formLabelWidth">
                            <el-input v-model="problems.problemUserId" autocomplete="off"/>
                        </el-form-item>    
                        <el-form-item label="del" :label-width="formLabelWidth">  
                            <el-input v-model="problems.del" autocomplete="off"/>
                        </el-form-item>
                
                    </el-form>
                    <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="updateIsFalse">Cancel</el-button>
                        <el-button type="primary" @click="updateData">
                        Confirm
                        </el-button>
                    </div>
                    </template>
                </el-dialog>
   
        
    </div>
</template>
    
<script setup>
   import { ElMessage } from 'element-plus';
    import { ref,getCurrentInstance, onMounted, watch, watchEffect } from 'vue';
    const current = getCurrentInstance();
    const {$http} = current.appContext.config.globalProperties;


    const replyVisible = ref(false)
    const dialogVisible = ref(false)
    const formLabelWidth = '140px'
    // 用于存放查询得的问题数据
     const tableData = ref([])
     // 用于存放通过id查询得回复数据
     const selectByIdData = ref([]);
    //   用于存放问题的类型
    
    const total = ref(0)
     const updateCategories = ref()
     const problems=ref({ 
        id:'',
        problemTitle:'',
        problemContent:'',
        problemUserId:'',
        problemReleaseTime:'',
        problemCategory:'',
        del:''
    })
    const reply = ref({
        id:'',
        replyQuestionId:'',
        problemTitle:'',
        replyPersonId:'',
        replyPersonName:'',
        repliedPersonId:'',
        repliedPersonName:'',
        replyContent:'',
        replyTime:'',
        del:'',
})
    

    const formData = ref({
        id: '',
        pageNum: 1,
        pageSize: 5,
        status: 0,

        replyQuestionId:'',
        replyPersonId:'',
        problemTitle:'',
        problemCategory:'',
    })

    function getAllShop(){
        $http({
            url: 'http://localhost:8081/sfzy/problems',
            method: 'get',
            params: formData.value
        }).then(res=>{
            tableData.value = res.data.data;
        
        })
        
    }
    function getAllPage(){
        $http({
            url: 'http://localhost:8081/sfzy/problems/page',
            method: 'get',
            params: formData.value
        }).then(res=>{
            tableData.value = res.data.data.list;
            console.log(res);
            total.value = res.data.data.total;
        })
        
    }
     //获取点击的分页页码并执行搜索功能
    function pageNumChange(num){
    formData.value.pageNum=num;
    getAllPage()
    }
    function handleSizeChange(size){
    formData.value.pageSize=size;
    getAllPage()
    }


    const updateType = ref([])
    function handleSearch(){
        $http({
            url: 'http://localhost:8081/sfzy/problems',
            method: 'get',
            params: formData.value
        }).then(res=>{
            tableData.value = res.data.data;  
        })
    }
    function updateData(){
        $http({
                url: 'http://localhost:8081/sfzy/problems',
                method: 'put',
                data: {
                    id: problems.value.id,
                    problemTitle: problems.value.problemTitle,
                    problemContent: problems.value.problemContent,
                    problemUserId: problems.value.problemUserId,
                    problemReleaseTime: problems.value.problemReleaseTime,
                    problemCategory: updateCategories.value,
                    del:'0'
                }
            }).then(res=>{
                
                ElMessage.success('修改成功');
                getAllShop();
            })
           
    dialogVisible.value = false;
    getAllShop();
    updateCategories.value = ''
    }

    function getType(){
        $http({
                url: 'http://localhost:8081/sfzy/specialty',
                method: 'get'
            }).then(res=>{
                updateType.value = res.data.data;
                console.log(res.data.data);

            })
    }
    function problemsOperate(i,k){
        console.log(i.row);
        
        if(k ==1){
            
            dialogVisible.value = true; 
            problems.value = {
                id:i.row.id,
                problemTitle:i.row.problemTitle,
                problemContent:i.row.problemContent,
                problemUserId:i.row.problemUserId,
                problemReleaseTime:i.row.problemReleaseTime,
                updateCategories:i.row.problemCategory,
                del:'0'
            }  
        }else if(k==2){
            console.log("这是删除操作");
        } else if(k==3){
            
           
            formData.value.replyQuestionId = i.row.id
            
            $http({
                url: 'http://localhost:8081/sfzy/reply',
                method: 'get',
                params:formData.value
            }).then(res=>{
                selectByIdData.value = res.data.data;
                 
                
            })
            replyVisible.value = true;

        }
      
    }
    ids = ref([])
        function handleSelectionChange(val){
           ids=val.map(function(item){return item.id})

        }
    
    function complete(e){
        if (e==2) {
            //批量删除
            $http({
            url: 'http://localhost:8081/sfzy/consultationAppointment?ids='+ids.value,
            method: 'delete',
        }).then(res=>{
            ElMessage.success('删除成功');
            console.log(tableData.value);
            total.value = res.data.data.total;
        })
       

        }
    }

    function updateIsFalse() {
   
        dialogVisible.value = false;
        problems.value = {
            id:'',
            problemTitle:'',
            problemContent:'',
            problemUserId:'',
            problemReleaseTime:'',
            problemCategory:'',
            del:''
        }
        updateCategories.value = ''
    }
    
    onMounted(()=>{
        getAllPage();
        getAllShop();
        getType();
    })
</script>
    
<style scoped>
     .my-table :deep(th){background-color: #1890ff;color: #ffffff;text-align: center;}
</style>